Remove Page Content

What's in store!

In this quick section, you're going to learn how to remove content from the page. Specifically, we'll look at these new methods:

.removeChild()
.remove()

In the process, you'll also learn about these two properties:

.firstElementChild
.parentElement

Removing a Child Element

We can use the .removeChild() method to…wait for it…remove a child element. Basically, this is exactly the opposite of the .appendChild() method. So just like the .appendChild() method, the .removeChild() method requires:

a parent element
the child element that will be removed

<parent-element>.removeChild(<child-to-remove>);

Here's the .removeChild() documentation page on MDN: removeChild docs

Let's see how to use this method:

DOM L2 47 - RemoveChild

A drawback (and workaround!) with the `.removeChild()` Method

Just like the .appendChild() method, there's a (somewhat minor) drawback to the .removeChild() method. Both methods:

require access to parent to function

However, we don't actually need to have the parent element because there is a workaround! Just like the .firstElementChild property can be called on a parent element to access its first element, every element also has a parentElement property that refers to its parent! So if we have access to the child element that we're about to add or remove, you can use the parentElement property to "move focus" to the element's parent. Then we can call .removeChild() (or .appendChild()) on that referenced parent element.

Let's look at an example:

const mainHeading = document.querySelector('h1');

mainHeading.parentElement.removeChild(mainHeading);

Let's walk through this code.

const mainHeading = document.querySelector('h1');

The preceding code will select the first <h1> on the page and stores it in the mainHeading variable. Now to the next line:

mainHeading.parentElement.removeChild(mainHeading);

This starts with the mainHeading variable. It calls .parentElement, so the focus of the next code is directed at the parent element. Then .removeChild() is called on the parent element. Finally, mainHeading itself is passed as the element that needs to be removed from its parent.

So an element uses itself to remove itself from its parent. Pretty cool, huh?

Removing a Child Element (Part 2!)

We went through all of those steps selecting an element, using DOM traversal techniques like .parentElement and .firstElementChild, so that we can remove a child element. I showed you this way so that you can get some exposure and practice to moving around in the DOM.

Now, you might be glad (or frustrated! haha) to find out there's an easier way to do all this! We can move the child element directly with the .remove() method:

const mainHeading = document.querySelector('h1');

mainHeading.remove();

Here's the .remove() documentation page on MDN: .remove() docs